<template>
	<view class="content">
		<tabar :current="2"></tabar>	
		<view class="class_h" style="background-color: #fff">
		        <view class="top" @click="return_step">					
					<image src="../../../static/resource/step_ups.png" mode="aspectFill" style="width: 74px;height: 30px; border-radius: 10rpx;"></image>
				</view>
		</view>	
	
		<view  style="margin-top: 10px; background-color: #fff;" class="home_container">
			<view class="flex gift_text justify-between">
				<text>收件人信息</text>
				<view class="flex">
					<image src="../../../static/resource/address.png" mode="aspectFill"  style="width: 73px;height: 24px; border-radius: 10rpx;"></image>
				</view>
			</view>
			
			
			<view class="opinion_wrap mt-20" >
			   <form bindsubmit="formSubmit" class="pl-10 pr-10">
				   
				 <view class="flex ml-10 mr-10 flex-direction" style="border-radius: 16rpx;width: 108%;background-color: #fff;">
						<view class="flex uni-form-item all_shop border-b">
							<view class="title" style="width: 125rpx;">收件人</view>
							<input class="uni-input ml-10" v-model="formData.linkname" focus placeholder="请填写收件人"  placeholder-style='text-align:right;padding-right:20rpx' style="width: 100%;text-align: right; padding-right:20rpx"/>
						</view>		  
			
						<view class="flex uni-form-item all_shop border-b">
							<view class="title" style="width: 185rpx;">收件电话</view>
							<input class="uni-input ml-30" v-model="formData.phone" focus placeholder="请填写收件电话" placeholder-style='text-align:right;padding-right:20rpx' style="width: 100%;text-align: right; padding-right:20rpx"/>
						</view>
			
						<view class="flex uni-form-item all_shop border-b" @click="getbox()">			  	
							<view class="title" style="width: 185rpx;">所在地区  </view>
							<input class="uni-input ml-30" v-model="formData.area_info" focus placeholder="请输入所在地区 "  disabled  placeholder-style="text-align:right;padding-right:20rpx" style="width: 100%;text-align: right; padding-right:20rpx"/>
						    <u-icon name="arrow-right" color="rgba(3, 31, 55, 0.6);" size="15"></u-icon>
						</view>	
								  
						<view class="flex uni-form-item all_shop border-b" style="height: 230rpx;">
							<view class="title" style="width: 185rpx;">详细地址</view>
							<textarea v-model="formData.address" focus placeholder="请填写如街道 门牌号 小区 楼栋号 单元室等" placeholder-style='text-align:right;padding-right:20rpx;margin-top:10rpx' style="padding-top: 65rpx;padding-left: 40rpx;width: 71%;display: flex;height: 100rpx;text-align:right;" ></textarea>
							<!-- <input class="uni-input ml-30" v-model="formData.address" focus placeholder="请输入详细地址"   style="width: 80%;"/> -->
						</view>	
				 </view> 		
				  
				
				
			  </form>
			  <u-picker :show="show" ref="uPicker" :columns="cityList" @confirm="confirm" @change="changeHandler" @cancel="show = false"></u-picker>
			</view>  
			
			<view class="flex submit_gift" @click="submit()">
				 <image src="/static/resource/submit.png"  style="width: 343px;height: 44px;"></image>
			</view>
			
		</view>
		
	</view>	
</template>



<script>	       
    // import areaList from '@/utils/address-data.js';  //文章最后附有下载地址，免费的
	import cityData from '@/utils/city.js'
	export default {
		data () {
			return {
				...getApp().globalData.config,				
				formData: {
				    linkname: '',
				    phone: '',
				    address: '',
					province: '',
					city:'',
					area:''				
				},
				area_info:'',
				type: 'c',
				check_addres:true,
				check_index:1,
				//地址展示框
				show: false,
				// 打开选择器显示默认城市
				cityList: [],				                
				cityLevel1: [],
				cityLevel2: [],
				cityLevel3: [],
				item:[],
				router:'',
				options:{},
				goodsInfo:{}
				
			}			
		},
		
		onLoad(e) {
			if(e.type){
				this.type=e.type
			}
			if(e.item){
				let item=JSON.parse(e.item)				
				this.formData.id=item.id
				this.formData.linkname=item.realname
				this.formData.check_index=item.is_gender
				this.formData.phone=item.phone
				this.formData.province=item.province
				this.formData.city=item.city
				this.formData.area=item.region
				this.formData.area_info=item.province+','+item.city+','+item.region
				this.formData.address=item.address
				this.check_addres=item.is_default
			}
			// 城市选择器初始化
			this.initCityData();
			// console.log('event',e)
			if(e.obj){
				this.goodsInfo=JSON.parse(e.obj)
			}
			
			
			
		},
		created() {
			let pages = getCurrentPages() // 获取栈实例
			let prevPage = pages[pages.length - 2] // 获取上个页面的数据，包含页面
			// console.log('prevPage',prevPage.route)
			this.router=prevPage.route
			this.options=prevPage.options
		},
			
		methods:{
			 ...getApp().globalData.function,
			 
			 //返回上一页
			 return_step(){
			 	this.$routers.router('/pages/clock/index','switchTab')
			 },
			 
			initCityData(){
				// 遍历城市js
				cityData.forEach((item1, index1) =>{
					let temp2 = [];
					this.cityLevel1.push(item1.provinceName);
					
					let temp4 = [];
					let temp3 = [];
					// 遍历市
					item1.cities.forEach((item2, index2) =>{
						temp2.push(item2.cityName);
						// 遍历区
						item2.counties.forEach((item3, index3) =>{
							temp3.push(item3.countyName);
						})
						temp4[index2] = temp3;
						temp3 = [];
					})
					this.cityLevel3[index1] = temp4;
					
					this.cityLevel2[index1] = temp2;
				})
				// 选择器默认城市
				this.cityList.push(this.cityLevel1,this.cityLevel2[0],this.cityLevel3[0][0]);
			},
			// 选中时执行
			changeHandler(e) {
				const {
					columnIndex,
					index,
					indexs,
					value,
					values,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e;
				if (columnIndex === 0) { // 选择第一列数据时
					// 设置第二列关联数据
					picker.setColumnValues(1, this.cityLevel2[index]);
					// 设置第三列关联数据
					picker.setColumnValues(2, this.cityLevel3[index][columnIndex]);
				}else if(columnIndex === 1){// 选择第二列数据时
					// 设置第三列关联数据
					picker.setColumnValues(2, this.cityLevel3[indexs[0]][index]);
				}
			},
			// 单击确认按钮时执行
			confirm(e) {
				// 输出数组 [省, 市, 区]
				this.formData.province=e.value[0]
				this.formData.city=e.value[1]
				this.formData.area=e.value[2]
				this.formData.area_info=e.value.join(',')
				// 隐藏城市选择器
				this.show = false;
			},
			
			
			getbox(){
				this.show = true;
			},
					
					
			radioChange(type){
				console.log(type);
				this.check_index=type.detail.value
			},
			is_def(e){
			    // let check_addres = this.check_addres
			    // if(check_addres==0){
			    //  this.check_addres=1
			    // }else{
			    //  this.check_addres=0
			    // }
			},
			
			submit(e){
				let that = this
				let formData=this.formData
				formData.is_default=this.check_addres?1:0
				formData.is_gender=this.check_index

				if(!formData.linkname){
					this.$showToast('请填写收货人信息！')
					return false
				}
				if(!formData.phone){
					this.$showToast('请填写联系方式信息！')
					return false
				}
				if(!formData.province || !formData.city || !formData.area){
					this.$showToast('请填写所在地区信息！')
					return false
				}
				if(!formData.address){
					this.$showToast('请填写详细地址信息！')
					return false
				}
				formData.goodsInfo=this.goodsInfo
				
				formData.token=uni.getStorageSync('userInfo').token
				
				this.$http.PostAddress(formData).then(rest=>{
					if(rest.resCode=='9999'){
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: rest.data.timeStamp,
							nonceStr: rest.data.nonceStr,
							package: rest.data.package,
							signType:rest.data.signType,
							paySign: rest.data.paySign,
							success: function (res) {		
								uni.showToast({title:'支付成功',icon:"success"}) 
								setTimeout(function(){
								   that.$routers.router('/pages/mine/index','switchTab') 
								},3000)
								
							},
							fail: function (err) {
								 uni.showToast({title:'请联系客服',icon:"none"}) 
							},									
						});								   								   
					}else{
					   uni.showToast({title:rest.resMessage,icon:"none"}) 
					}	
				})				
			},
			
			
		}
	}
</script>






<style>
	
	.submit_gift{
		 position:fixed;
		 bottom: 100px;
		 display: flex;
		 left: 50%;
		 transform:  translateX(-50%);
		 margin-top: 20rpx;
	}
	
	.goods_list{
		 display: flex;
		 width: 344px;
		 flex-direction: column;
		 position: relative;
		 padding-bottom: 110rpx;
	}
	
	 .close_icon{
		 padding-top: 30rpx;
		 padding-left: 30rpx;
		 padding-bottom: 20rpx;
		 border-bottom: 2rpx solid  #EAEAEA;
	 }
	 .gift-title{
		 margin-top: 20rpx;
		 margin-left: 45rpx;
		 color: #333333;
		 font-weight: bold;
		 font-size: 16px;
	 }
	 
	 .gift-container {
	   display: flex;
	   flex-direction: column;
	  /* align-items: center; */
	   text-align: center;
	   margin-left: 180rpx;
	   margin-top: 30rpx;
	 }
	 
	 /* 每行 */
	 .item {
	   display: flex;
	   align-items: center; /* 垂直居中关键 */
	/*   justify-content: center; */
	   margin-bottom: 45rpx;
	   
	 }
	 
	 /* 圆点 */
	 .dot {
	   width: 16rpx;
	   height: 16rpx;
	   border-radius: 50%;
	   background-color: #287EE4;
	   margin-right: 8rpx;
	 
	   /* 关键调整 */
	   display: inline-block; 
	   vertical-align: middle;
	 }
	 
	 /* 文字 */
	 .label {
	   font-size: 28rpx;
	   color: #333;
	   line-height: 16rpx; /* 与圆点高度一致 */
	   display: inline-block;
	   vertical-align: middle;
	 }
	
	.gift-titles{
		 margin-top: 20rpx;
		 color: #333333;
		 font-weight: bold;
		 font-size: 16px;
		 margin-bottom: 30rpx;
	}
	.content{
		background-color: #ececec
	}
	.gift_text{
		display: flex;
		padding-top: 20rpx;
		padding-left: 32rpx;
		padding-right: 32rpx;
		margin-bottom: -20rpx;
		color: #333333;
		font-weight: bold;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #EAEAEA;
	}
	
	.swiper-view {
	  width: 280px;
	  display: block;
	  height: 380px;
	  transform: scale(0.9);
	  transition: all 0.2s ease-in 0s;
	  overflow: hidden;
	  border-radius: 60rpx;
	  border: 2rpx solid #EAEAEA;
	  /* background: whitesmoke; */
	  text-align: center;
	}
 .img{	
	  width: 280px;
	  height: 280px;
	}
	
	.class_h{
		display: flex;
		flex-direction: column;
		background-size: 100% 100%;
		padding-bottom: 190rpx;
		position: relative;
	}
	
	.top{
		position: fixed;
		padding-top: 110rpx;
		font-weight: 600;
		font-size: 38rpx;
		color: #333333;
		line-height: 49rpx;
		 left: 30rpx
	}
	
	input::placeholder {
		  text-align: right;
		}
		.opinion_wrap{
			display: flex;
			flex-wrap: wrap;	
			flex-direction: row;
		}
		button::after{
			border: none;
		}
		.box{
		  position: absolute;
		  left: 0;
		  bottom: 0;
		  overflow: hidden;
		  width: 100%;
		  height: 100vh;
		  z-index: 8;
		}
		.black{
		  position: absolute;
		  left: 0;
		  top: 0;
		  width: 100%;
		  height: 100vh;
		  background: rgba(0, 0, 0, .5);
		  z-index: 10;
		}
		.nr{
		  position: absolute;
		  left: 0;
		  bottom: 0;
		  width: 100%;
		  height: 500rpx;
		  z-index: 12;
		  background: #FFF;
		}
		.item{
		  display: flex;
		  align-items: center;
		  justify-content: space-between;
		  width: 100%;
		  height: 100rpx;
		  line-height: 100rpx;
		  padding: 0 20rpx;
		  box-sizing: border-box;
		  border-bottom: 1px solid #EEE;
		}
	
		
		.uni-form-item{
			display: flex;
			flex-direction: row;
			/* justify-content: center; */
			align-items: center;
			height: 90rpx;
			font-size: 30rpx;
			padding-left: 45rpx;		
		}
		.a-picker-view-picker-indicator {
		  height: 80rpx !important;
		  display: flex;
		  justify-content: center;
		  align-items: center;
		}
		button{
			display: flex;
			flex-direction: row;
			justify-content: center;
			color: white;
			border: none;
			width: 85%;
			padding: 5rpx 0rpx;
			position: absolute; /* 设置按钮为绝对定位 */
			bottom: 0; /* 距离底边为0 */
			left: 50%; /* 左侧距离父元素宽度的50% */
			transform: translateX(-50%); /* 向左移动自身宽度的50%，保持水平居中 */	
			background:  #36B3E9;
			border-radius: 40rpx;
			font-size: 30rpx;
			height: 88rpx;
			margin-bottom: 25rpx;
		}
	
</style>
